<template>
  <view class="wrap">
    <view class="title">
      {{ obj.name }}
    </view>
    <view>
      <view class="tips-bar">
        <TnIcon name="fire" color="#bebebe" /><text class="tips-text"
          >不知道如何开始？可以尝试以下实例：</text
        >
      </view>
      <view
        class="problem-item"
        @tap.stop="jumpZhAnswer(item)"
        v-for="(item, index) in obj.questions"
        :key="index"
      >
        <text>{{ item }}</text>
        <TnIcon name="share" />
      </view>
    </view>
  </view>
  <bottomEnter />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { bottomEnter } from '@/components/bottom-enter'
import { onLoad } from '@dcloudio/uni-app'
import { getDetailById } from '@/services/api'
import { useUserStore } from '@/stores'

const obj = ref({})
const pageId = ref('')
const userStore = useUserStore()

const jumpZhAnswer = (item) => {
  tnNavPage(`/home-page/agent/zh-answer?problem=${item}&pageId=${pageId.value}`)
}

onLoad((option) => {
  pageId.value = option.id
  if (pageId.value) {
    getData()
  }
  userStore.changeCurrentAgentId(pageId.value)
})

const getData = () => {
  getDetailById(pageId.value).then((res) => {
    const { code, data } = res
    if (code === 0) {
      obj.value = data
    }
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  width: 90%;
  padding: 30rpx 40rpx;
  margin: 30rpx 5%;
  background-color: #fff;
  border-radius: 40rpx;
  font-family: 'tuniao-xiaowei';
}
.title {
  font-size: 26rpx;
  font-weight: bold;
  font-family: 'tuniao-xiaowei';
}
.tips-bar {
  margin: 20rpx 0;
}
.tips-text {
  font-size: 20rpx;
  color: #bebebe;
  font-family: 'tuniao-xiaowei';
}
.problem-item {
  padding-top: 40rpx;
  padding-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #f6f6f6;
  font-family: 'tuniao-xiaowei';
}
</style>
